<template>
  <div>
    <input type="text" v-model="newMessage" />
    <button @click="fabu">发布</button>
    <ul>
      <li v-for="(message,id) in messages" :key="id">{{ message.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newMessage: "",  //用来存储当前输入框的内容
      messages: [],  //数组，用来存储所有发布的留言
    };
  },
  methods: {
    fabu() {
      if (this.newMessage !== "") { //检查 newMessage 是否为空
        this.messages.push({   //push用来添加新的留言到 messages 数组
          text: this.newMessage, //创建新的对象
        });
        this.newMessage = ""; // 清空输入框准备下一次输入
      }
    },
  },
};
</script>

<style>
</style>